<script setup lang="ts">
import { setTheme } from "@/api/setting";
import { useTheme } from "@/composables/useTheme";
import themeList from "@/utils/theme";
import { getUserInfo } from "@/api/user";
import { onLoad, onShow, onReady, onHide, onUnload } from "@dcloudio/uni-app";
import Cache from "@/utils/cache";
import { hidePageNavInWechatBrowser } from "@/composables/useHiddenNavbar";
import footerBtn from "@/components/footerBtn/index.vue";
import { Tips } from "@/utils";
import hideWechatMenu from "@/composables/hideWechatMenu";
onReady(() => {
  hidePageNavInWechatBrowser();
});
const { colorStyle } = useTheme();
onShow(() => {
  hideWechatMenu();
  getDefaultTheme();
});
onUnload(async () => {
  console.log("onUnload返回上一页触发");

  await getDefaultTheme();
  setThemeHandler();
});
onHide(async () => {
  console.log("onhide");

  await getDefaultTheme();
  setThemeHandler();
});
function getDefaultTheme() {
  return getUserInfo().then((res: any) => {
    let { theme, theme_colour } = res.data.business;
    let themeValue = theme;
    let subThemeValue = theme_colour;
    if (themeValue && subThemeValue) {
      const themeCurrentIndex = themeListData.value.findIndex(
        (item) => item.value === themeValue
      );
      themeCurrent.value = themeCurrentIndex;
      const subThemeCurrentIndex = subThemeList.value.findIndex(
        (item) => item.value === subThemeValue
      );
      subThemeCurrent.value = subThemeCurrentIndex;

      setMergedTheme();
    }
    if(!themeValue){
      themeCurrent.value=1//默认黑色主题
    }
  });
}
// 合并两个主题
let mergedTheme: string = "";
function setMergedTheme() {
  const themeValue = themeListData.value[themeCurrent.value].value;
  const subThemeValue = subThemeList.value[subThemeCurrent.value].value;
  mergedTheme =
    themeList["theme"][themeValue] + themeList["sub_theme"][subThemeValue];

  // 更新响应式变量以触发页面样式更新
  colorStyle.value = mergedTheme;
}
function setThemeHandler() {
  const themeValue = themeListData.value[themeCurrent.value].value;
  const subThemeValue = subThemeList.value[subThemeCurrent.value].value;
  mergedTheme =
    themeList["theme"][themeValue] + themeList["sub_theme"][subThemeValue];
  uni.setStorageSync("viewColor", mergedTheme);
  uni.setStorageSync("themeValue", themeValue);
  uni.setStorageSync("subThemeValue", subThemeValue);

  // 更新响应式变量以触发页面样式更新
  colorStyle.value = mergedTheme;
}
let themeCurrent = ref(0);
let themeListData = ref([
  {
    name: "浅色主题",
    id: 1,
    value: "pale",
  },
  {
    name: "深色主题",
    id: 2,
    value: "dark",
  },
  {
    name: "金色主题",
    id: 3,
    value: "gold",
  },
]);
function changeTheme(index: number) {
  if (themeCurrent.value == index) return;
  themeCurrent.value = index;
  setThemeHandler();
  console.log(themeListData.value[themeCurrent.value].id, "----");
}
let subThemeCurrent = ref(0);
let subThemeList = ref([
  {
    color:
      "background: linear-gradient(90.00deg, rgba(220, 202, 156, 1),rgba(240.2008819580078, 219.61224365234375, 168.14060974121094, 1) 50%,rgba(214, 194, 145, 1) 100%)",
    id: 1,
    value: "golden",
  },
  {
    color:
      "background: linear-gradient(90.00deg, rgba(92, 104, 109, 1),rgba(28, 40, 46, 1) 50%,rgba(28, 40, 46, 1) 100%);",
    id: 2,
    value: "black",
  },
  {
    color:
      "background: linear-gradient(90.00deg, rgba(121.80803680419922, 23.2542667388916, 23.2542667388916, 1),rgba(140.02232360839844, 29.27739143371582, 29.27739143371582, 1) 50%,rgba(113.83928680419922, 16.04099464416504, 16.04099464416504, 1) 99%);",
    id: 3,
    value: "red",
  },
  {
    color:
      "background: linear-gradient(90.00deg, rgba(23.2542667388916, 53.83993148803711, 121.80803680419922, 1),rgba(29.27739143371582, 59.827735900878906, 140.02232360839844, 1) 50%,rgba(19.41337013244629, 16.04099464416504, 113.83928680419922, 1) 99%);",
    id: 4,
    value: "blue",
  },
  {
    color:
      "background: linear-gradient(90.00deg, rgba(43.64470291137695, 121.80803680419922, 23.2542667388916, 1),rgba(29.27739143371582, 140.02232360839844, 40.7337532043457, 1) 50%,rgba(16.04099464416504, 113.83928680419922, 43.01984786987305, 1) 99%);",
    id: 5,
    value: "green",
  },
]);

function changeSubTheme(index: number) {
  if (subThemeCurrent.value == index) return;
  subThemeCurrent.value = index;
  setThemeHandler();
}
let tableData = ref([{ id: "" }, { id: "" }, { id: "" }, { id: "" }]);
let menuList = ref([
  {
    name: "联系电话",
    icon: "dianhua",
    path: "",
  },
  {
    name: "门店地址",
    icon: "dizhi",
    path: "",
  },
  {
    name: "到价提醒",
    icon: "xiaoxi",
    path: "",
  },
  {
    name: "分享海报",
    icon: "image",
    path: "",
  },
]);
function submitHandler() {
  uni.showLoading();
  const themeValue = themeListData.value[themeCurrent.value].value;
  const subThemeValue = subThemeList.value[subThemeCurrent.value].value;
  mergedTheme =
    themeList["theme"][themeValue] + themeList["sub_theme"][subThemeValue];
  const params = {
    theme: themeValue,
    theme_colour: subThemeValue,
  };
  setTheme(params)
    .then((res) => {
      try {
        Tips({
          title: res.info,
          success: () => {
            uni.navigateBack();
          },
        });
      } catch (error) {
        console.log(error, "错误信息");
      }
    })
    .catch(() => {
      uni.hideLoading();
    });
}
</script>
<template>
  <view class="wrap" :style="colorStyle">
    <view class="theme_list flex_sb">
      <view
        class="theme_item flex_c"
        :class="{ active: themeListData[themeCurrent].id == item.id }"
        v-for="(item, index) in themeListData"
        :key="index"
        @click="changeTheme(index)"
      >
        {{ item.name }}</view
      >
    </view>
    <!-- <view class="sub_theme_list flex_sb">
      <view
        class="sub_theme_item flex_c"
        :style="item.color"
        :class="{ active: subThemeList[subThemeCurrent].id == item.id }"
        v-for="(item, index) in subThemeList"
        :key="index"
        @click="changeSubTheme(index)"
      ></view>
    </view> -->
    <view class="main">
      <view class="container">
        <view class="header">
          <!-- <view class="logo_box">
            <image src="@/static/image/logo.png" mode="widthFix" />
          </view> -->
          <view class="swiper_box">
            <image
              src="@/static/image/set1.png"
              mode="widthFix"
              v-if="themeListData[themeCurrent].value !== 'dark'"
            ></image>
            <image src="@/static/image/set2.png" mode="widthFix" v-else></image>
          </view>
          <!-- <view class="top_box pad1020 flex_sb">
            <view
              class="top_item flex_s"
              v-for="(item, index) in menuList"
              :key="index"
            >
              <text :class="'iconfont icon-' + item.icon"></text>
              <text>{{ item.name }}</text>
            </view>
          </view> -->
        </view>
        <view class="table_box">
          <uni-table ref="table" stripe emptyText="暂无更多数据">
            <uni-tr>
              <uni-th width="87" align="center">
                <view class="table_th"> 商品 </view>
              </uni-th>
              <uni-th width="87" align="center">
                <view class="table_th"> 回购 </view>
              </uni-th>
              <uni-th width="87" align="center">
                <view class="table_th"> 销售 </view>
              </uni-th>
              <uni-th width="87" align="center">
                <view class="table_th"> 高低 </view>
              </uni-th>
            </uni-tr>

            <uni-tr v-for="(item, index) in tableData" :key="index">
              <uni-td align="center">
                <view class="table_td"></view>
              </uni-td>
              <uni-td align="center">
                <view class="table_td"> </view>
              </uni-td>
              <uni-td align="center">
                <view class="table_td"> </view>
              </uni-td>
              <uni-td align="center">
                <view class="table_td"> </view>
              </uni-td>
            </uni-tr>
          </uni-table>
        </view>
        <view class="tabale_title"> 上海黄金交易所 </view>
        <view class="table_box">
          <uni-table ref="table" stripe emptyText="暂无更多数据">
            <uni-tr>
              <uni-th width="87" align="center">
                <view class="table_th"> 商品 </view>
              </uni-th>
              <uni-th width="87" align="center">
                <view class="table_th"> 回购 </view>
              </uni-th>
              <uni-th width="87" align="center">
                <view class="table_th"> 销售 </view>
              </uni-th>
              <uni-th width="87" align="center">
                <view class="table_th"> 高低 </view>
              </uni-th>
            </uni-tr>

            <uni-tr v-for="(item, index) in tableData" :key="index">
              <uni-td align="center">
                <view class="table_td"></view>
              </uni-td>
              <uni-td align="center">
                <view class="table_td"> </view>
              </uni-td>
              <uni-td align="center">
                <view class="table_td"> </view>
              </uni-td>
              <uni-td align="center">
                <view class="table_td"> </view>
              </uni-td>
            </uni-tr>
          </uni-table>
        </view>
      </view>
    </view>
    <view class="uni-p-b-98"></view>
    <footerBtn @submitHandler="submitHandler" title="保存设置" />
  </view>
</template>

<style scoped lang="scss">
::v-deep .uni-table {
  background: unset;
  // 改表头字体样式
  .uni-table-th {
    border: none;
    background: var(--view-th1-color);
    font-size: 24rpx;
    font-weight: normal;
    color: var(--view-th-font-color);
    font-size: 24rpx;
  }
  .table--border,
  .uni-table-td {
    border: none;
  }
  .uni-table-tr:nth-child(2n + 2),
  .uni-table-tr:nth-child(2n + 2):hover {
    background: var(--view-th2-color);
  }
  .uni-table-tr:nth-child(2n + 3),
  .uni-table-tr:nth-child(2n + 3):hover {
    background: var(--view-th3-color);
  }
}
.wrap {
  padding-top: 30rpx;
  min-height: 100vh;
  .table_box {
    width: 100%;
    margin: 0 auto;
    border-radius: 16px;
    margin-bottom: 50rpx;
    // background: rgba(255, 255, 255, 0.45);
    overflow: hidden;
    .table_td {
      height: 90rpx;
      font-size: 30rpx;
    }
  }
  .tabale_title {
    color: var(--view-tabale-title);
    text-align: center;
    font-family: Source Han Serif CN;
    font-size: 30rpx;
    line-height: 43rpx;
    letter-spacing: 10rpx;
    text-align: center;
    margin-bottom: 26rpx;
  }
  .main {
    padding: 0rpx 22rpx;
  }
  .container {
    padding: 27rpx 22rpx;
    border-radius: 40rpx;
    overflow: hidden;
    margin-top: 33rpx;
    background: var(--view-linear-home-bg);
    .header {
      margin-bottom: 37rpx;
      .logo_box {
        width: 174rpx;
        margin-bottom: 20rpx;
        image {
          width: 100%;
        }
      }
      .swiper_box {
        width: 470rpx;
        height: 154rpx;
        margin: 0 auto 20rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .top_box {
        width: 630rpx;
        margin: 0 auto;
        border-radius: 16rpx;
        box-shadow: 0px 4rpx 20rpx 0px rgba(220, 202, 156, 0.3);
        background: var(--view-linear-home);
        .top_item {
          font-size: 24rpx;
          color: var(--view-fontColor);
          .iconfont {
            font-size: 24rpx;
            margin-right: 5rpx;
          }
        }
      }
    }
  }
  .sub_theme_list {
    padding: 0 50rpx;
    .sub_theme_item {
      width: 68rpx;
      height: 68rpx;
      border-radius: 50%;
      border: 2rpx solid transparent;
    }
    .active {
      position: relative;
      border: 2rpx solid #000;
      &::after {
        content: "√";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -11rpx;
        color: #fff;
        background: #000;
        display: flex;
        justify-content: center;
        align-content: center;
        width: 22rpx;
        height: 22rpx;
        font-size: 16rpx;
        border-radius: 50%;
      }
    }
  }
  .theme_list {
    padding: 0 48rpx;
    margin-bottom: 25rpx;
    .theme_item {
      height: 60rpx;
      border-radius: 99rpx;
      background: #fff;
      font-size: 30rpx;
      color: #000;
      border: 2rpx solid transparent;
      padding: 0 40rpx;
    }
    .active {
      color: var(--view-theme);
      border: 2rpx solid var(--view-theme);
    }
  }
}
</style>
